import React, { useEffect, useState } from 'react'
import { NavBar, SearchBar, InfiniteScroll, List ,FloatingBubble} from 'antd-mobile'
import { FilterOutline, ClockCircleOutline, CloseOutline } from 'antd-mobile-icons'
// 调用防抖
import uselodash from '../../hook/uselodash'
import { listIndex } from '../../request/api'
import { useNavigate } from 'react-router-dom'
import Mysslist from '../../components/mysslist'
import { Button } from 'react-vant'
function Index() {
  const [hasMore, setHasMore] = useState(false)
  let nav = useNavigate()
  let [sslist, setsslist] = useState([])
  let [page, setpage] = useState(1)
  let [hislist, sethislist] = useState(JSON.parse(localStorage.getItem('history')) || [])


  console.log('ssss', hislist)
  // 防抖
  // 搜索
  let ss = uselodash((val) => {
    console.log(val)
    localStorage.setItem('history', JSON.stringify([...hislist, val]) || [])
    sethislist([...hislist, val])

    // 调用搜索接口
    listIndex(val).then((res) => {
      console.log('rrr', res)
      if (res.data.code == 200) {
        setsslist([...sslist, ...res.data.data])

      }
      // 判断搜索数据，如果超过一页，就继续加载
      if (res.data.data == 0) {
        setHasMore(false)
      } else {
        // 拼接下一页
        setpage((page) => page + 1)
      }
      // 搜索框无内容，清空搜索列表
      if (val == '') {
        setsslist([])
      }
    })


  }, 1000)
  //  点击差号,删除
  let shan = (ii) => {
    console.log('55555', ii)
    hislist.some((item, index) => {
      console.log('55555', item)
      if (ii !== item) {
           console.log('1111', item)
           localStorage.removeItem('history')
        return sethislist(item)
        
      }
    })

  }
  // 点击删除
  let del = () => {
    localStorage.removeItem('history')
    sethislist([])
  }
  return (
    <div>
      <NavBar onBack={() => nav(-1)} right={<FilterOutline />}> 搜索</NavBar>
      {/* 搜索框 */}
      <SearchBar
        onChange={val => ss(val)} placeholder='这里输入关键字' />
      {/* 历史记录 */}
      <div style={{ margin: '10px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>历史记录</span>
          <span onClick={() => del()}>删除</span>
        </div>
        {/* 数据 */}
        <List style={{ display: sslist.length > 0 ? 'none' : 'block' }}>
          {
            hislist.length > 0 && hislist.map((item, index) => {
              return <List.Item style={{ display: item.length == '' ? 'none' : 'block' }} key={index} prefix={<ClockCircleOutline />} extra={<CloseOutline onClick={() => shan(item)} />}>{item}</List.Item>
            })
          }

        </List>
      </div>
      {/* 悬浮按钮 */}
       <FloatingBubble
        style={{
          '--initial-position-bottom': '24px',
          '--initial-position-right': '45%',
          '--edge-distance': '24px',
          '--background':'#000',
        '--border-radius':'10px',
         '--size':'60px'
        }}
        onClick={()=>nav('/map')}
      >附近活动</FloatingBubble>
      
     
      {/* 搜索数据的封装 */}
      <Mysslist data={sslist} page={page} hasMore={hasMore} ></Mysslist>


    </div>
  )
}

export default Index
